<!--高顺-->

<!DOCTYPE html>
<!-- suppress ThymeleafVariablesResolveInspection -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>忘记密码</title>

    <link type="text/css" href="/static/css/gs/wangji.css" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/static/css/bootstrap.min.css}" href="/static/css/bootstrap.min.css">
    <script th:src="@{/static/js/jquery-1.8.3.js}" src="/static/js/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="/static/js/gs/layui-v2.5.5/layui/css/layui.css"
          th:href="@{/static/js/gs/layui-v2.5.5/layui/css/layui.css}">
    <script th:src="@{/static/js/jquery/jquery.min.js}"  src="/static/js/jquery/jquery.min.js"
            type="text/javascript"></script>
    <link th:href="@{/static/layui/css/layui.css}" href="/static/layui/css/layui.css" rel="stylesheet" media="all">
    <script th:src="@{/static/layui/layui.js}" src="/static/layui/layui.js" type="text/javascript"></script>
</head>
<style>
    #yanzhengma ,#yNull,#phone1{
        display: none;
        color: red;
    }
</style>
<body>

<div class="content">
    <div class="web-width">
        <div class="for-liucheng">
            <div class="liulist for-cur"></div>
            <div class="liulist"></div>
            <div class="liulist"></div>
            <div class="liulist"></div>
            <div class="liutextbox">
                <div class="liutext for-cur"><em>1</em><br><strong>填写账户名</strong></div>
                <div class="liutext for-cur"><em>2</em><br><strong>设置新密码</strong></div>
                <div class="liutext for-cur"><em>3</em><br><strong>完成</strong></div>
            </div>
        </div><!--for-liucheng/-->
        <form  method="get" class="forget-pwd" enctype="multipart/form-data">
            <dl>
                <dt>手机号：</dt>
                <dd><input type="text" id="userPhone" onblur="userPhone1()"> <span id="phone1"></span></dd>
                <div class="clears"></div>
            </dl>
            <dl>
                <dt>验证码：</dt>
                <dd>
                    <input type="text" id="code" name="code" onblur="codeY()"><br/>
                    <span id="yNull">验证码不能为空</span>
                    <div class="yanzma">
                        <input type="button" class="btn" id="code1" value="获取验证码" onclick="codeButton()">
                        <br/>
                    </div>
                    <span id="yanzhengma">验证码输入错误</span>
                </dd>
                <div class="clears"></div>
            </dl>
            <div class="subtijiao"><input type="button" value="提交" onclick="tijiao()"></div>
        </form><!--forget-pwd/-->
    </div><!--web-width/-->
</div><!--content/-->


<script>
    function userPhone1() {
        var userPhone=$("#userPhone").val();
        if (userPhone==''){
            $("#phone1").html("手机号不能为空");
            return false;
        }else if (!(/^1[3456789]\d{9}$/.test(userPhone))) {
            $("#phone1").html("手机号输入错误");
            return false;
        }else {
            $.ajax({
                url:'/user/phoneRightAndWrong',
                dataType:'json',
                type:'post',
                data:{
                    userPhone:$("#userPhone").val()
                },success:function (data) {
                    console.log("msg="+data);
                    if (data=="1"){
                        $("#phone1").html("手机号必须跟登录时的相同");
                        $("#phone1").css("display","inline");
                        return false;
                    } else {
                        $("#phone1").html("");
                        $("#phone1").css("display","none");
                        return true;
                    }
                }
            });
            return true;
        }

    }
    function codeY() {
        var code=$("#code").val();
        if (code==''){
            $("#yNull").css("display","inline");
            return false;
        } else {
            $("#yNull").css("display","none");
            return true;
        }
    }
    // 获取验证码按钮
    function codeButton() {
        var code = $("#code1");
        code.attr("disabled", "disabled");
        setTimeout(function () {
            code.css("opacity", "0.8");
        }, 100)
        var time = 60;
        var set = setInterval(function () {
            code.val("(" + --time + ")秒后重新获取");
        }, 1000);
        setTimeout(function () {
            code.attr("disabled", false).val("重新获取验证码");
            clearInterval(set);

        }, 60000);

        huyzm();
    }

    //点击获取验证码按钮后触发的事件
    var huyzm = function () {
        $.ajax({
            url: '/user/forgetThePassword',
            type: 'post',
            dataType: 'json',
            data: {
                userPhone: $("#userPhone").val(),
            }, success: function () {
                $("#phone1").css("display","inline");
                $("#phone1").html("手机号输入有误");
            }
        })
    }

    function tijiao() {
        if (codeY()==true && userPhone1()==true){
            $.ajax({
                url:'/user/fgt',
                type:'post',
                dataType:'json',
                data:{
                    userPhone:$("#userPhone").val(),
                    code:$("#code").val()
                },success:function (msg) {
                    // var isSuccess=msg["user"];
                    // alert("pwd="+isSuccess.userName);   //在js中获取controller传来的值
                    if (msg==3){
                        window.location.href="/user/forget2";
                    }else {
                        $("#yanzhengma").css("display","inline");
                    }
                }
            })
        } else {
            if (userPhone1()==false){
                $("#phone1").css("display","inline");
                $("#phone1").html("手机号输入有误");
            }
            if (codeY()==false){
                $("#yanzhengma").css("display","inline");
                return false;
            }
        }
    }
</script>
</body>
</html>